<template>
  <a-drawer
      v-model:visible="visible"
      :title="modalTitle"
      :closable="false"
      width="75%"
      :footer-style="{ textAlign: 'right' }"
      @close="handleCancel"
  >
    <a-form ref="formRef" :model="formState" :label-col="{ span: 3 }">

      <a-form-item
          label="报名开始时间"
          name="start_time"
          :rules="[{ required: true, message: '请输入报名开始时间' }]"
      >
        <a-input v-model:value="formState.start_time" style="width: 300px" placeholder="请输入1-24的整数" type="number"/>
      </a-form-item>

      <a-form-item
          label="报名截止时间"
          name="end_time"
          :rules="[{ required: true, message: '请输入报名开始时间' }]"
      >
        <a-input v-model:value="formState.end_time" style="width: 300px" placeholder="请输入1-24的整数" type="number"/>
      </a-form-item>
      <a-form-item
          label="申购公布时间"
          name="pub_time"
          :rules="[{ required: true, message: '请输入申购公布时间' }]"
      >
        <a-input v-model:value="formState.pub_time" style="width: 300px" placeholder="请输入1-24的整数" type="number"/>
      </a-form-item>
      <a-form-item
          label="申购值"
          name="all_apply_num"
          :rules="[{ required: true, message: '请输入申购值' }]"
      >
        <a-input v-model:value="formState.all_apply_num" style="width: 300px" placeholder="请输入申购值" type="number"/>
      </a-form-item>
      <a-form-item
          label="支付申购值"
      >
        <a-input v-model:value="applyNum.minNum" style="width: 200px" placeholder="请输入最小支付申购值" type="number" />
        -
        <a-input v-model:value="applyNum.maxNum" style="width: 200px" placeholder="请输入最大支付申购值" type="number"/>
      </a-form-item>

      <a-form-item
          label="支付后申购值"
      >
        <a-input v-model:value="payApplyNum.minNum" style="width: 200px" placeholder="请输入最小支付后申购值" type="number" />
        -
        <a-input v-model:value="payApplyNum.maxNum" style="width: 200px" placeholder="请输入最大支付后申购值" type="number"/>
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number
            v-model:value="formState.sort"
            placeholder="请输入排序"
            style="width: 300px"
        />
      </a-form-item>
      <a-form-item
          label="申购商品"
          :rules="[{ required: true, message: '请选择申购商品' }]"
          name="goods_id"
      >
        <a-button type="primary" @click="handleAddSubscribe">
          <PlusOutlined/>
          添加申购商品
        </a-button>
        <a-table
            :columns="columns"
            :data-source="state.goods"
            :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'goods_img'">
              <a-image
                  :src="record.goods_img"
                  :height="50"
                  :width="50"
              ></a-image>
            </template>
          </template>
        </a-table>
      </a-form-item>

    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
  </a-drawer>
  <!-- 申购商品 -->
  <Goods ref="goodsRef" @select-goods="handleGood"/>
</template>
<script setup>
import dayjs from "dayjs";
import useModal from "@/utils/useModal";
import {reactive, ref} from "vue";
import {PlusOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";
import {newAdd,  newInfo, newEdit} from "@/api/subscribe";
import Goods from "./Goods.vue";

const {visible, modalTitle} = useModal();

const emits = defineEmits(["model-success"]);
const formRef = ref();
const goodsRef = ref();

const columns = [
  {
    title: "id",
    dataIndex: "goods_id",
  },
  {
    title: "商品名称",
    dataIndex: "goods_name",
  },
  {
    title: "商品图片",
    dataIndex: "goods_img",
  },
  {
    title: "货号",
    dataIndex: "goods_no",
  },
  {
    title: "库存",
    dataIndex: "stock_num",
  },
];
const formState = reactive({
  goods_id: null,
  start_time:'',
  end_time:'',
  pub_time:'',
  all_apply_num:'',
  apply_num:'',
  pay_apply_num:'',
  sort: 0,
});
const applyNum=reactive({
  minNum:'',
  maxNum:'',
})
const payApplyNum=reactive({
  minNum:'',
  maxNum:'',
})


const state = reactive({
  goods: [],
});
const show = (model) => {
  visible.value = true;
  modalTitle.value = model ? "编辑申购" : "新增申购";
  if (model && model.apply_id) {
    getDetails(model.apply_id);
  } else {
    resetForm({
      apply_id: null,
    });
    state.goods = [];
  }
};
const getDetails = (id) => {
  newInfo({
    id: id,
  }).then((res) => {
    if (res.code === 0) {
      const data = res.data;
      resetForm(data);
      state.goods=[]
      state.goods.push(data.goods);
      payApplyNum.minNum= data.pay_apply_num.split('-')[0]
      payApplyNum.maxNum= data.pay_apply_num.split('-')[1]

      applyNum.minNum= data.apply_num.split('-')[0]
      applyNum.maxNum= data.apply_num.split('-')[1]

    }
  });
};
//设置表单的值
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
// 保存
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    formState.apply_num=applyNum.minNum+'-'+applyNum.maxNum
    formState.pay_apply_num=payApplyNum.minNum+'-'+payApplyNum.maxNum
    let params = {
      ...formState,
    };
    if (formState.apply_id) {
      newEdit({
        id: formState.apply_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    } else {
      //添加
      newAdd({...params}).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    }
  });
};
// 关闭
const handleCancel = () => {
  formRef.value.resetFields();
  state.goods = [];
  visible.value = false;
};
// 添加申购商品
const handleAddSubscribe = () => {
  goodsRef.value.show();
};
const handleGood = (data) => {
  state.goods = data;
  formState.goods_id = data[0].goods_id;
};
defineExpose({
  show,
});
</script>